<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>执行日志 - Big Whale</title>
    <link href="../../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="../../css/common.css" rel="stylesheet"/>
    <style type="text/css">
        .textarea {
            width: 420px;
            /*初始化高度*/
            min-height: 150px;
            /*设置最大高度*/
            max-height: 500px;
            overflow-x: hidden;
            overflow-y: scroll;
            font-size: 14px;
            background-color: #111;
            color: #fff;
        }
    </style>
</head>
<body ng-app="content-app" ng-controller="content-controller">

<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">执行日志</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-12 search-form">
                    <form class="form-inline" ng-submit="options.mypage.toFirst()">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="脚本包含" ng-model="options.query.content">
                        </div>
                        <div class="form-group" th:if="${session.user.root}">
                            <label for="query_select_uid">用户</label>
                            <select id="query_select_uid" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.uid" ng-options="item.id as item.username for item in userList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_agentId">代理</label>
                            <select id="query_select_agentId" class="selectpicker show-tick"
                                    ng-model="options.query.agentId" ng-options="item.id as item.name for item in agentList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_clusterId">集群</label>
                            <select id="query_select_clusterId" class="selectpicker show-tick"
                                    ng-model="options.query.clusterId" ng-options="item.id as item.name for item in clusterList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_status">状态</label>
                            <select id="query_select_status" class="selectpicker show-tick" ng-model="options.query.status"
                                       ng-options="item.value as item.name for item in cmdStatusList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <mydaterange ng-start="options.query.start" ng-end="options.query.end"></mydaterange>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">搜索</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th th:if="${session.user.root}">
                                        用户
                                    </th>
                                    <th>
                                        脚本
                                    </th>
                                    <th>
                                        集群/代理
                                    </th>
                                    <th>
                                        超时
                                    </th>
                                    <th>
                                        输出
                                    </th>
                                    <th>
                                        详情
                                    </th>
                                    <th>
                                        状态
                                    </th>
                                    <th>
                                        时间
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in options.items">
                                    <td th:if="${session.user.root}">
                                        {{userMap[item.uid].username}}
                                    </td>
                                    <td>
                                        <span class="script-name">{{scriptMap[item.scriptId].name}}</span><br/>
                                        <label ng-if="item.schedulingId != null" class="label label-info">任务调度{{item.schedulingInstanceId != null ? '(批处理) - ' + item.schedulingInstanceId : '(流处理)'}}{{item.retryNum != null ? '-retry' + item.retryNum : ''}}</label>
                                    </td>
                                    <td>
                                        <span ng-if="agentMap[item.agentId]">{{agentMap[item.agentId].name}}</span>
                                        <span ng-if="clusterMap[item.clusterId]">{{clusterMap[item.clusterId].name}}</span>
                                        <br/>
                                        <label ng-if="item.agentInstance != null" class="label label-info">代理实例：{{item.agentInstance}}</label>
                                    </td>
                                    <td>
                                        {{item.timeout}}分
                                    </td>
                                    <td style="cursor: pointer; word-break: break-all">
                                        <textarea class="textarea" style="color:limegreen;" readonly>{{item.outputs}}</textarea><br/>
                                        <textarea class="textarea" style="color:red;" readonly>{{item.errors}}</textarea>
                                    </td>
                                    <td>
                                        <a ng-if="item.jobUrl != null" href="{{item.jobUrl}}" target="_blank">Applicaion Url</a>
                                    </td>
                                    <td>
                                        <label ng-if="cmdStatusMap[item.status]" class="label label-{{cmdStatusMap[item.status].style}}">
                                            <img ng-if="item.status == 2" src="/img/loading.gif" />
                                            {{cmdStatusMap[item.status].name}}
                                        </label>
                                    </td>
                                    <td>
                                        <span>开始时间: {{item.startTime}}</span><br/>
                                        <span>结束时间: {{item.finishTime}}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <mypage ng-model="options"></mypage>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../../js/common.js" type="text/javascript"></script>
<script src="../../libs/laydate/laydate.js" type="application/javascript"></script>
<script th:inline="javascript">
    var app = angular.module('content-app', []);
    registerHttpInterceptor(app);
    registerPage(app);
    registerDateRangePicker(app);
    var user = [[${session.user}]];
    app.controller('content-controller', function ($scope, $http) {
        getScript($scope, $http, false);
        getCluster($scope, $http);
        if (user.root) {
            getAuthUser($scope, $http);
        }
        getAgent($scope, $http);
        appendCmdStatus($scope);

        var id = [[${id}]];
        var schedulingId = [[${schedulingId}]];
        var scriptId = [[${scriptId}]];

        var t1 = null;
        // 获取数据列表
        $scope.options = {
            query: {
                id: id,
                schedulingId: schedulingId,
                scriptId: scriptId
            },
            listUrl: './getpage.api',
            reloadAfter : function(items) {
                var finished = $scope.isFinish(items);
                if (!finished) {
                    if (t1) {
                        window.clearInterval(t1);
                    }
                    t1 = window.setInterval($scope.reloadData, 2000);
                }
            }
        };

        $scope.reloadData = function () {
            $http.post('./getpage.api', $scope.options.query)
                .success(function (data) {
                    var items = data.content;
                    if (id) {
                        $scope.options.items[0]['outputs'] = items[0]['outputs'];
                        $scope.options.items[0]['errors'] = items[0]['errors'];
                        $scope.options.items[0]['status'] = items[0]['status'];
                        $scope.options.items[0]['jobUrl'] = items[0]['jobUrl'];
                        $scope.options.items[0]['startTime'] = items[0]['startTime'];
                        $scope.options.items[0]['finishTime'] = items[0]['finishTime'];
                    } else {
                        $scope.options.items = items;
                    }
                    var finished = $scope.isFinish(items);
                    if (finished) {
                        window.clearInterval(t1);
                    }
                });
        };

        $scope.isFinish = function (items) {
            var size = items.length;
            var finish = 0;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (item.status !== 1 && item.status !== 2) {
                    finish += 1;
                }
            }
            return finish >= size;
        };

    });

</script>
</body>
</html>